<template>

	<div id="hotlist">
		<div id="header">
			<div style="font-size: 1rem;font-weight: 800;">
        <el-icon style="color: blue;"><List /></el-icon>热度图片列表
			</div>
			<el-button type="primary" size="small" @click="edit(0)" icon="CirclePlusFilled">
				添加新的热度图片
			</el-button>
			<div style="font-size: 0.8rem;">
				类型自定义，获取时指定类型 1=轮播图 2=广告图
			</div>
		</div>
		<div>
			<el-table :data="data.hots" border highlight-selection-row highlight-current-row fit show-overflow-tooltip
				style="width: 100%;">
				<el-table-column prop="memo" label="描述">
					<template v-slot:default="scope">
						<p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ">{{ scope.row.memo}}
						</p>
					</template>
				</el-table-column>
				<el-table-column label="类型" min-width="50px">
					<template v-slot:default="scope">
						{{ typeName(scope.row.type)}}
					</template>
				</el-table-column>
				<el-table-column prop="hot" label="优先级" min-width="50px"></el-table-column>
				<el-table-column label="商品图">
					<template v-slot:default="scope">
						<img :src="pic(scope.row.picture)" alt="scope.row.date.book.name" style="width: 50%;">
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="40px">
					<template v-slot:default="scope">
						<el-button type="text" size="default" @click="edit(scope.row.id)">修改</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="40px">
					<template v-slot:default="scope">
						<el-button type="text" size="default" @click="del(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>

			</el-table>
		</div>
	</div>
</template>

<script setup>
	import api from '../../../api';
	import pic from '../../../api/pic';
	import router from '../../../router';
	import store from '../../../store';
	import {
		ElMessage
	} from 'element-plus';
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	
	const data = reactive({
		hots:[]
	})

	const typeName = (num) => {
		if (num === 1) return '轮播图';
		if (num === 2) return '广告';
		return '无类型';
	}
	const edit = (id) => {
    store.state.addOrUpdate.hot.id = id;
    router.push("/adm/hot/edit")
	}
	const del = (id) => {
		// 需要改进
		api.get(`/api/adm/hot/delete/${id}`).then((resp) => {
      ElMessage.success(resp.data.msg)
			if (resp.data.code === 200) {
        data.hots = resp.data.data
			}
		})
	}
	
	onMounted(() => {
		api.get("/api/adm/hot/findAll").then((resp) => {
			data.hots = resp.data.data
		})
	})
</script>

<style lang="less" scoped>
	#hotlist {
		#header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #b3d8ff;
			padding: 10px 0;
		}
	}
</style>